{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 网页名称 -->
    <title>视频展示</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
    <style>
        .centered_text {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50px;
            margin-bottom: 20px;
        }

        .centered_text span {
            font-size: 28px;
            font-weight: bolder;
        }

        .centered_text hr {
            flex-grow: 1;
            border: none;
            border-top: 1px solid #ddd;
        }

        .centered_text::before,
        .centered_text::after {
            content: '';
            flex-grow: 1;
            height: 1px;
            background: #ddd;
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="?">视频展示</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                {% block nav %}{% endblock %}
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="/admin/">后台入口</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container mt-4" style="text-align: center">
    <div class="card">
        <div class="card-body">
            <div class="col-md-12">
                <div class="centered_text">
                    <hr>
                    <span>&emsp;{{ video.title }}&emsp;</span>
                    <hr>
                </div>
            </div>
            <div class="ratio ratio-16x9">
                <video class="col-md-12" controls preload="metadata">
                    <source src="{% url 'video_stream' video.id %}" type="video/mp4">
                    您的浏览器不支持该视频。Your browser does not support the video tag.
                </video>
            </div>
        </div>
    </div>
</div>


<!-- js -->
<script rel="script" src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script rel="script" src="{% static 'plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
<script rel="script" src="{% static 'js/echarts.js' %}"></script>
<!-- js代码 -->
<script>
    // 当页面其他内容加载完毕后再开始加载视频
    document.addEventListener("DOMContentLoaded", function () {
        const video = document.querySelector("video");
        video.setAttribute("src", video.querySelector("source").getAttribute("src"));
    });
</script>
</body>
</html>